<template>
  <view class="">
    <view class="nav"></view>
    <view class="userInfo">
      <image class="headImg" :src="userInfo?.avatar" mode="scaleToFill" />
      <view class="info">
        <view class="left">
          <view class="l_top">
            <view class="title">{{ userInfo?.nickName }}</view>
            <image class="icon" v-if="userInfo?.level === '1'" src="../../../static/home/hg.png" mode="scaleToFill" />
            <view class="authLabel" v-if="userInfo?.authFlag === '1'"><image src="../../../static/home/yrz.png" mode="scaleToFill" />已认证</view>
          </view>
          <view class="l_buttom">{{ userInfo?.company }} {{ userInfo?.job }}</view>
        </view>
        <view class="right" @click="goPage('/pages/myPage/MyBusinessCard/MyBusinessCardList')">我的名片</view>
      </view>
      <view class="hyLabelList">
        行业: <view class="hyLabel" v-for="(item, index) in userInfo?.industryList" :key="index"> {{ item.industryName }} </view>
      </view>
    </view>
    <view class="tabBox">
      <u-tabs
        :list="tabList"
        @click="tabClick"
        :activeStyle="{
          color: '#1E1E1E',
          fontWeight: 'bold',
          transform: 'scale(1.18)',
        }"
        :inactiveStyle="{
          color: '#BEBEBE',
        }"
        lineWidth="32"
        lineHeight="4"
        lineColor="linear-gradient(90deg, rgba(66,110,254,0.5) 0%, #426EFE 100%)"
      ></u-tabs>
    </view>
    <view class="main">
      <template v-if="list.length > 0">
        <TrendsItem v-for="(item, index) in list" :key="index" :info="item" ismy>
          <template #topping>
            <view class="topBox" v-if="item.toppingFlag === '1' || item.promotionFlag === '1'">
              <view class="left_active">置顶中 <view class="label">广告</view></view>
              <view class="right_active">剩余：{{ getDurationDay(item) }} 天</view>
            </view>
            <view class="topBox" v-if="item.toppingFlag !== '1' && item.promotionFlag !== '1' && istgStatus === '1'">
              <view class="left">未置顶</view>
              <view class="right" @click.stop="goTop(item)">去置顶</view>
            </view>
          </template>
        </TrendsItem>
      </template>
      <view v-else style="width: 100%; display: flex; justify-content: center; margin-top: 15rpx">
        <u-empty mode="list"></u-empty>
      </view>
    </view>
    <view class="buttomBox">
      <u-button type="primary" shape="circle" plain @click="addPostFn('1')">发布供应</u-button>
      <u-button type="primary" shape="circle" @click="addPostFn('2')">发布求购</u-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import TrendsItem from "@/components/trendsItem.vue";
import { onMounted, ref } from "vue";
import { goPage } from "@/utils/commonFn";
//@ts-ignore
import { onReachBottom, onShow } from "@dcloudio/uni-app";
import { getMyPostList } from "@/api/order";
import { configKey } from "@/api/my";
import dayjs from "dayjs";
const userInfo = ref<myTypes.userInfo>();
const istgStatus = ref("1");

onMounted(async () => {
  const res1 = await configKey("promotion_switch");
  istgStatus.value = res1.data;
  userInfo.value = uni.getStorageSync("userInfo");
  if (!userInfo.value?.avatar) {
    uni.showToast({
      title: "请先创建名片",
      icon: "none",
    });
    setTimeout(() => {
      goPage("/pages/myPage/MyBusinessCard/MyBusinessCardList");
    }, 600);
  }
});
onShow(() => {
  rest();
});
const goTop = (info: myTypes.myPostList) => {
  if (info.status === "2") {
    goPage(`/pages/myPage/myPosts/addPost?pageType=${info.type}&id=${info.id}`);
  } else {
    uni.showToast({
      title: "当前帖子还在审核中~~~",
      icon: "none",
    });
  }
};
const addPostFn = (type: string) => {
  const userInfo: myTypes.userInfo = uni.getStorageSync("userInfo");
  if (!userInfo.mobile) {
    uni.showModal({
      title: "提示",
      cancelText: "否",
      confirmText: "是",
      content: "您当前未登录，是否前往登录",
      success: function (res) {
        if (res.confirm) {
          goPage("/pages/myPage/login");
        }
      },
    });
    return;
  }
  if (userInfo.cardFlag == 0) {
    uni.showModal({
      title: "提示",
      cancelText: "否",
      confirmText: "是",
      content: "您当前还没有名片，是否前往创建",
      success: function (res) {
        if (res.confirm) {
          goPage("/pages/myPage/MyBusinessCard/createBusinessCard");
        }
      },
    });
    return;
  }
  if (userInfo.authFlag == "0") {
    uni.showModal({
      title: "提示",
      cancelText: "否",
      confirmText: "是",
      content: "您当前还未实名认证，是否前往",
      success: function (res) {
        if (res.confirm) {
          goPage("/pages/myPage/businessCardAuth");
        }
      },
    });
    return;
  }
  if (userInfo.level !== "1") {
    uni.showModal({
      title: "提示",
      cancelText: "否",
      confirmText: "是",
      content: "您未开通会员，是否前往",
      success: function (res) {
        if (res.confirm) {
          goPage("/pages/myPage/activateMembership");
        }
      },
    });
    return;
  }
  goPage(`/pages/myPage/myPosts/addPost?pageType=${type}`);
};
const getDurationDay = (info: any) => {
  console.log(info);
  const startDate = dayjs(new Date());
  const endDate = dayjs(info.promotionEndDate);
  // 计算两个日期之间的天数差
  const diffInDays = endDate.diff(startDate, "days");
  console.log(diffInDays);
  return diffInDays;
};
const formData = ref({
  pageNum: 1,
  pageSize: 10,
  type: "1",
});
const tabList = ref([
  {
    id: "1",
    name: "我供应的",
  },
  {
    id: "2",
    name: "我求购的 ",
  },
]);
const status = ref("loadmore");
const list = ref<myTypes.myPostList[]>([]);
const getList = async () => {
  if (status.value == "nomore") {
    return;
  }
  status.value = "loadmore";
  const res = await getMyPostList(formData.value);
  list.value = list.value.concat(res?.rows);

  if (list.value.length >= (res?.total as number)) {
    status.value = "nomore";
  } else {
    status.value = "loadmore";
  }
};
onReachBottom(() => {
  formData.value.pageNum++;
  getList();
});
const rest = () => {
  formData.value.pageNum = 1;
  list.value = [];
  status.value = "loadmore";
  getList();
};
const tabClick = (e: any) => {
  formData.value.type = e.id;
  rest();
};
</script>

<style lang="less" scoped>
.nav {
  width: 100%;
  height: 90rpx;
  background: #1676fd;
}
.userInfo {
  padding: 0 40rpx;
  background: #fff;
  padding-bottom: 32rpx;
  .headImg {
    width: 112rpx;
    height: 112rpx;
    border-radius: 50%;
    margin-top: -44rpx;
  }
  .info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      .l_top {
        display: flex;
        align-items: center;
        .title {
          font-size: 36rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          color: #1e1e1e;
          line-height: 50rpx;
        }
        .icon {
          width: 24rpx;
          height: 24rpx;
          margin: 0 16rpx;
        }
      }
      .l_buttom {
        font-size: 24rpx;
        font-family: PingFangSC, PingFang SC;
        color: #bebebe;
        line-height: 46rpx;
      }
    }
    .right {
      width: 144rpx;
      height: 56rpx;
      background: #e7f1fe;
      border-radius: 28rpx;
      font-size: 26rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #1676fd;
      text-align: center;
      line-height: 56rpx;
    }
  }
}
.hyLabelList {
  display: flex;
  font-size: 22rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  color: #bebebe;
  line-height: 32rpx;
  margin-top: 32rpx;

  .hyLabel {
    background: #f8f8f8;
    padding: 0 12rpx;
    margin-right: 8rpx;
  }
}
.tabBox {
  background: #ffffff;
  padding: 20rpx 32rpx;
}
/deep/ .u-tabs__wrapper__nav__line {
  left: -19px !important;
  border-radius: 0rpx !important;
}
.main {
  padding-bottom: 120rpx;
}
.topBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20rpx;
  border-top: 1rpx solid #f8f8f8;
  margin-top: 15rpx;
  .left,
  .left_active {
    font-size: 30rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #1e1e1e;
    line-height: 42rpx;
  }
  .right {
    background: #e7f1fe;
    border-radius: 28rpx;
    font-size: 26rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #1676fd;
    padding: 14rpx 32rpx;
  }
  .right_active {
    font-size: 26rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #1676fd;
    padding: 14rpx 32rpx;
  }
  .left_active {
    display: flex;
    align-items: center;
    .label {
      background: #f5f7f9;
      border-radius: 24rpx;
      padding: 6rpx 16rpx;
      font-size: 22rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #bebebe;
      line-height: 32rpx;
    }
  }
}
.buttomBox {
  display: flex;
  gap: 10px; /* 子元素之间的间距 */
}
</style>
